import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Type, Data } from '../../../utils/Global'
import TextItem from './textItem'
import SystemItem from './systemItem'
import ImageItem from './imageItem'
import VoiceItem from './voiceItem'
import QuestionItem from './questionItem'
import AnswerItem from './answerItem'
class QaItem extends Component {
  renderHead() {
    const { item, color_theme } = this.props
    const borderImage = require(`@images/teacher_border${color_theme === 'red' ? '_red': ''}.png`)
    const iconImage = require(`@images/new_teacher_icon${color_theme === 'red' ? '_red': ''}.png`)
    const teacherDom = (
      <div className="qa_head">
        <img className="qa_head_border" src={borderImage} alt="" />
        <img className="qa_head_icon" src={iconImage} alt="" />
        <img className="qa_head_img" src={item.sender.headimgurl} alt="" />
      </div>
    )
    const studentDom = (
      <div className="qa_head">
        <img className="qa_head_img" src={item.sender.headimgurl} alt="" />
      </div>
    )
    const systemDom = (
      <div className="qa_head">
        <img className="qa_head_img" src={require('@images/qa_system_head_icon.png')} alt="" />
      </div>
    )
    if (item.type === Type.COMMON_TYPE.COMMON_SYSTEM_TIP) {
      return systemDom
    }
    return item.sender.is_teacher ? teacherDom : studentDom
  }
  renderContent() {
    const { item } = this.props
    switch (item.type) {
      case Type.COMMON_TYPE.COMMON_SYSTEM_TIP:
        return <SystemItem text={item.data.text} />
      case Type.COMMON_TYPE.COMMON_QA_TEXT:
        return <TextItem text={item.data.text} />
      case Type.COMMON_TYPE.COMMON_QA_VOICE:
        return <VoiceItem url={item.data.file} time={item.data.record_time} item={item}/>
      case Type.COMMON_TYPE.COMMON_QA_IMAGE:
        return <ImageItem url={item.data.file} />
      case Type.COMMON_TYPE.COMMON_QA_ANSWER:
        let rest = {}
        if ([1, 2].includes(item.data.answer.data.type)) {
          rest.url = item.data.answer.data.file
        }
        return <AnswerItem item={item} {...rest}/>
      case Type.COMMON_TYPE.COMMON_QA_QUESTION:
        return <QuestionItem item={item}/>
      default:
        return null
    }
  }
  renderGiftTip() {
    const { item } = this.props
    return item.type === Type.COMMON_TYPE.COMMON_QA_START_GIFT ? (
      <div className="gift_tip">
        发起抽奖，请在小程序中查看
      </div>
    ) : null
  }
  checkLinks() {
    const { item } = this.props
    const links = item.data.links || []
    var hasLink = false
    for (let i in links) {
      if (links[i].id === Data.user.id) {
        hasLink = true
        break
      }
    }
    return hasLink
  }
  renderAnswerTip() {
    const { item } = this.props
    let showAnswerTip = !!(item.type === Type.COMMON_TYPE.COMMON_QA_ANSWER
      && item.data.question.user.id === Data.user.id)
    return showAnswerTip ? (
      <div className="qa_answer_tip">讲师回复了你的提问</div>
    ) : null
  }
  renderLink() {
    const hasLink = this.checkLinks()
    return hasLink ? (
      <div className="link_tip">
        <div className="link_tip_inner">有人@你</div>
      </div>
    ) : null
  }
  render() {
    const { item, index, color_theme } = this.props
    const giftClass = item.type === Type.COMMON_TYPE.COMMON_QA_START_GIFT ? ' gift' : ''
    const teacherClass = item.sender.is_teacher ? ' teacher' : ''
    const redClass = color_theme === 'red' ? ' red' : ''
    const systemClass = item.type === Type.COMMON_TYPE.COMMON_SYSTEM_TIP ? ' system' : ''
    const itemClass = 'qa_item' + giftClass + teacherClass + redClass + systemClass
    const nickname = item.type === Type.COMMON_TYPE.COMMON_SYSTEM_TIP ? '系统通知' :item.sender.nickname
    return (
      <div className={itemClass}>
        { this.renderAnswerTip() }
        {this.renderLink()}
        {this.renderGiftTip()}
        {this.renderHead()}
        <div className="qa_detail">
          <div className="qa_name">{nickname}</div>
          {this.renderContent()}
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    color_theme: state.MainScreenState.info.color_theme
  }
}

export default connect(mapStateToProps)(QaItem)
